﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Share/Site2.Master" AutoEventWireup="true" CodeBehind="ThemeSetting.aspx.cs" Inherits="Sport.ThemeSetting" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        .yt-lockup2-tile .yt-lockup2-meta-info > li:before {
            color: #999999;
            content: "•";
            margin: 0 5px;
        }

        .themeleon-callout {
            margin-right: 38px;
            color: #777;
            font-size: 12px;
            line-height: 18px;
            border-radius: 3px;
        }

        .uploader-background .image-preview {
            float: left;
            width: 110px;
            height: 80px;
            background-color: #ddd;
        }

        .uploader-image .image-preview {
            border-radius: 4px;
        }

        .uploader-image .uploader-tools {
            margin-left: 120px;
        }

        .uploader-avatar .photo-selector, .uploader-image .photo-selector {
            position: relative;
            margin-bottom: 5px;
        }

        .uploader-avatar .photo-file-name, .uploader-image .photo-file-name {
            font-size: 12px;
            padding-left: 6px;
        }

        .color-preview {
            float: left;
            width: 110px;
            height: 30px;
            margin-right: 10px;
            border-radius: 4px;
        }

        .auto-style1 {
            height: 24px;
            margin-top: -24px;
            margin-bottom: 0;
        }

        .theme-list .theme-image {
            border-radius: 2px 2px 2px 2px;
            display: block;
            position: relative;
        }

        .clearfix:before, .clearfix:after, .control-group:before, .control-group:after, .stream-item > div:before, .stream-item > div:after, .module:after, .module:before, .follow-card header:after, .follow-card header:before, .follow-bar:after, .follow-bar:before, .search-header:after, .search-header:before, .tweet-form:after, .tweet-form:before, .modal-footer:after, .modal-footer:before, .local-trends-breadcrumb:after, .local-trends-breadcrumb:before, .input-prepend .add-on, .input-append .add-on, .wrapper:after, .wrapper:before, .expanded-content:before, .expanded-content:after, .stream-item:before, .stream-item:after {
            content: " ";
            display: table;
        }

        .clearfix:after, .control-group:after, .stream-item > div:after, .module:after, .follow-card header:after, .follow-bar:after, .search-header:after, .tweet-form:after, .modal-footer:after, .local-trends-breadcrumb:after, .wrapper:after, .expanded-content:after, .stream-item:after {
            clear: both;
        }

        .clearfix:before, .clearfix:after, .control-group:before, .control-group:after, .stream-item > div:before, .stream-item > div:after, .module:after, .module:before, .follow-card header:after, .follow-card header:before, .follow-bar:after, .follow-bar:before, .search-header:after, .search-header:before, .tweet-form:after, .tweet-form:before, .modal-footer:after, .modal-footer:before, .local-trends-breadcrumb:after, .local-trends-breadcrumb:before, .input-prepend .add-on, .input-append .add-on, .wrapper:after, .wrapper:before, .expanded-content:before, .expanded-content:after, .stream-item:before, .stream-item:after {
            content: " ";
            display: table;
        }

        .theme-list {
            margin-left: -12px;
        }

        ul {
            list-style: none outside none;
        }

        ul, ol {
            margin: 0;
            padding: 0;
        }

        .form-actions1 {
            margin: 0;
            padding-left: 10px;
        }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#aThank").hide();
            $("#aFlag").hide();
            $("#NewFeedDetail").hide();
            
            $("#swatch1").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/1.png)');
                $('#form1').css('background-color', 'rgb(192, 222, 237)');
                $('#form1').css('background-repeat', 'no-repeat');
                $('#form1').css('background-attachment', 'fixed');
            });
            $("#swatch2").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/2.gif)');
                $('#form1').css('background-color', 'rgb(198, 226, 238)');
                $('#form1').css('background-repeat', 'no-repeat');
                $('#form1').css('background-attachment', 'fixed');
            });
            $("#swatch3").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/3.gif)');
                $('#form1').css('background-color', 'rgb(237, 236, 233)');
                $('#form1').css('background-repeat', 'no-repeat');
                $('#form1').css('background-attachment', 'fixed');
            });
            $("#swatch4").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/4.gif)');
                $('#form1').css('background-color', 'rgb(0, 153, 185)');
                $('#form1').css('background-repeat', 'no-repeat');
                $('#form1').css('background-attachment', 'fixed');
            });
            $("#swatch5").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/5.gif)');
                $('#form1').css('background-color', 'rgb(53, 39, 38)');
            });
            $("#swatch6").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/6.gif)');
                $('#form1').css('background-color', 'rgb(112, 147, 151)');
            });
            $("#swatch7").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/7.gif)');
                $('#form1').css('background-color', 'rgb(235, 235, 235)');
            });
            $("#swatch8").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/8.gif)');
                $('#form1').css('background-color', 'rgb(139, 84, 43)');
            });
            $("#swatch9").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/9.gif)');
                $('#form1').css('background-color', 'rgb(26, 27, 31)');
            });
            $("#swatch10").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/10.gif)');
                $('#form1').css('background-color', 'rgb(100, 45, 139)');
            });
            $("#swatch11").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/11.gif)');
                $('#form1').css('background-color', 'rgb(255, 102, 153)');
            });
            $("#swatch12").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/12.gif)');
                $('#form1').css('background-color', 'rgb(186, 223, 205)');
            });
            $("#swatch13").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/13.gif)');
                $('#form1').css('background-color', 'rgb(178, 223, 218)');
            });
            $("#swatch14").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/14.gif)');
                $('#form1').css('background-color', 'rgb(19, 21, 22)');
                $('#form1').css('background-repeat', 'repeat');
                $('#form1').css('background-attachment', 'scroll');
            });
            $("#swatch15").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/15.gif)');
                $('#form1').css('background-color', 'rgb(2, 35, 48)');
            });
            $("#swatch16").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/16.gif)');
                $('#form1').css('background-color', 'rgb(154, 228, 232)');
            });
            $("#swatch17").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/17.gif)');
                $('#form1').css('background-color', 'rgb(219, 233, 237)');
            });
            $("#swatch18").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/18.gif)');
                $('#form1').css('background-color', 'rgb(172, 222, 214)');
            });
            $("#swatch19").click(function () {
                $('#form1').css('background-image', 'url(Images/Themes/19.gif)');
                $('#form1').css('background-color', 'rgb(255, 240, 77)');
            });
            $("#divsubmit").click(function () {
                var style = $('#form1').css('background-image') + "_" +
                    $('#form1').css('background-color') + "_" +
                    $('#form1').css('background-repeat') + "_" +
                   $('#form1').css('background-attachment');
                style = style.replace(",", "AA");
                style = style.replace(",", "AA");
                style = style.replace("(", "BB");
                style = style.replace(")", "CC");
                style = style.replace("/", "XX");
                style = style.replace("/", "XX");
                $.ajax({
                    url: 'ThemeSetting.aspx?mode=changeTheme&style=' + style,
                    type: 'POST',
                    success: function (response) {
                        alert('thành công');
                        window.location.href = 'Default.aspx';
                    }
                });
            });
        });
    </script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td valign="bottom">
                            <img id="loader" alt="" src="Images/loading.gif" style="display: none" />
                        </td>
                        <td valign="bottom"></td>
                    </tr>
                </table>
                <div id="footer">
                    <form id="design-form" class="form-horizontal" method="post" enctype="multipart/form-data" action="https://twitter.com/settings/design/update">
                        <input name="user[profile_background_tile]" value="0" type="hidden">
                        <input name="media_data[]" class="file-data" type="hidden">
                        <input name="media_file_name" class="file-name" type="hidden">
                        <input id="user_profile_use_background_image" name="user[profile_use_background_image]" value="true" type="hidden">

                        <input name="authenticity_token0" value="8a2157783fa718bfe4d2fb868bfbcb65e22e1217" type="hidden">
                        <div id="settings-alert-box" class="alert hidden">
                            <i id="settings-alert-close" class="close"></i>
                        </div>
                        <h3 class="settings-header">Pick a premade theme</h3>
                        <input id="user_profile_theme" name="profile_theme" value="1" type="hidden">
                        <input id="user_profile_default" name="user[profile_default]" value="true" type="hidden">
                        <fieldset class="control-group">
                            <table>
                                <tr>
                                    <td style="padding: 10px">
                                        <li id="swatch1">
                                            <label class="theme selected" data-image="/images/themes/theme1/bg.png" data-id="1" data-background_color="#C0DEED" data-link_color="#0084B4" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_007.gif">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <li id="swatch2">
                                            <label class="theme" data-image="/images/themes/theme2/bg.gif" data-id="2" data-background_color="#C6E2EE" data-link_color="#1F98C7" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch.gif">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/themes/theme3/bg.gif" data-id="3" data-background_color="#EDECE9" data-link_color="#088253" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_015.gif" id="swatch3">
                                        </label>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/themes/theme4/bg.gif" data-id="4" data-background_color="#0099B9" data-link_color="#0099B9" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_019.gif" id="swatch4">
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px">
                                        <li class="theme-item">
                                            <label class="theme selected" data-image="/images/themes/theme1/bg.png" data-id="1" data-background_color="#C0DEED" data-link_color="#0084B4" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_011.gif" id="swatch5">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <li class="theme-item">
                                            <label class="theme" data-image="/images/themes/theme2/bg.gif" data-id="2" data-background_color="#C6E2EE" data-link_color="#1F98C7" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_003.gif" id="swatch6">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/themes/theme3/bg.gif" data-id="3" data-background_color="#EDECE9" data-link_color="#088253" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_006.gif" id="swatch7">
                                        </label>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/themes/theme4/bg.gif" data-id="4" data-background_color="#0099B9" data-link_color="#0099B9" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_004.gif" id="swatch8">
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px">
                                        <li class="theme-item">
                                            <label class="theme selected" data-image="/images/themes/theme1/bg.png" data-id="1" data-background_color="#C0DEED" data-link_color="#0084B4" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_010.gif" id="swatch9">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <li class="theme-item">
                                            <label class="theme" data-image="/images/themes/theme2/bg.gif" data-id="2" data-background_color="#C6E2EE" data-link_color="#1F98C7" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_013.gif" id="swatch10">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/swatch_017.gif" data-id="3" data-background_color="#EDECE9" data-link_color="#088253" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_017.gif" id="swatch11">
                                        </label>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/themes/theme4/bg.gif" data-id="4" data-background_color="#0099B9" data-link_color="#0099B9" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_002.gif" id="swatch12">
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px">
                                        <li class="theme-item">
                                            <label class="theme selected" data-image="/images/themes/theme1/bg.png" data-id="1" data-background_color="#C0DEED" data-link_color="#0084B4" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_008.gif" id="swatch13">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <li class="theme-item">
                                            <label class="theme" data-image="/images/themes/theme2/bg.gif" data-id="2" data-background_color="#C6E2EE" data-link_color="#1F98C7" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_014.gif" id="swatch14">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/themes/theme3/bg.gif" data-id="3" data-background_color="#EDECE9" data-link_color="#088253" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_005.gif" id="swatch15">
                                        </label>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/themes/theme4/bg.gif" data-id="4" data-background_color="#0099B9" data-link_color="#0099B9" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_012.gif" id="swatch16">
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px">
                                        <li class="theme-item">
                                            <label class="theme selected" data-image="/images/themes/theme1/bg.png" data-id="1" data-background_color="#C0DEED" data-link_color="#0084B4" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_016.gif" id="swatch17">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <li class="theme-item">
                                            <label class="theme" data-image="/images/themes/theme2/bg.gif" data-id="2" data-background_color="#C6E2EE" data-link_color="#1F98C7" data-tiled="false">
                                                <span class="selected-border"></span>
                                                <img class="theme-image" src="Images/swatch_009.gif" id="swatch18">
                                            </label>
                                        </li>
                                    </td>
                                    <td style="padding: 10px">
                                        <label class="theme" data-image="/images/themes/theme4/bg.gif" data-id="4" data-background_color="#0099B9" data-link_color="#0099B9" data-tiled="false">
                                            <span class="selected-border"></span>
                                            <img class="theme-image" src="Images/swatch_018.gif" id="swatch19">
                                        </label>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                        <div id="divsubmit" class="form-actions1">
                            <input type="button" value="Save changes" class="btn primary-btn" />
                        </div>
                    </form>
                </div>
            </td>
        </tr>
    </table>

</asp:Content>
